<template>
        <el-container>
            <PageHeader/>
                <el-main class="register-form">
                    <router-view></router-view>
                </el-main>
            <el-footer>
                <PageFooter/>
            </el-footer>
        </el-container>
</template>
<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import PageHeader from '@component/common/PageHeader.vue';
    import PageFooter from '@component/common/PageFooter.vue';
    import { mapActions } from 'vuex';
    @Component({
        components: {
            PageHeader,
            PageFooter
        },
        methods: {
            ...mapActions([
                'getMessageNumber',
                'getAllTips'
            ])
        }
    })
    export default class User extends Vue {
        isLogin = false
        created () {
            let userinfo = localStorage.getItem('userInfo');
            if (userinfo) {
                this.userInfo = JSON.parse(userinfo);
                this.isLogin = true
            }else{
                this.isLogin = false
            }
        }
        mounted () {
            if (this.isLogin) {
                this.getMessageNumber();
                this.getAllTips();
            }
        }
    }
</script>
<style lang="scss" scoped>
    
</style>
<style lang="scss">
    .go_back {
        display: flex;
        justify-content: center;
        .el-button--text {
            color: $__color-link;
            font-size: 16px;
        }
    }
    .register-login-bg {
        background-image: url("https://hpx-pc.oss-cn-beijing.aliyuncs.com/registerImgTem/register-bg.png");
    }
    .register-form-int {
        margin-top: 20px;
    }
    .el-container{
        min-height: 100%;
    }
    .el-main {
        padding: 0;
        padding-top: 96px;
        min-height: calc(100% - 320px);
    }
    .register-login {
        font-size: $__font-size-default;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .el-form-item {
        margin-bottom: 18px;
    }
    .el-button+.el-button {
        margin-left: 0;
    }
    .register-int {
        .el-input__inner {
            @include register-form-int;
        }
    }
    .register-btn {
        display: flex;
        flex-direction: row;
        margin-left: 110px;
        margin-bottom: 40px;
        margin-top: 20px;
        & button {
            @include save-btn;
            font-size: $__little-font-size;
        }
    }
    .login-font-color {
        &:hover {
            color: $__color-link;
        }
    }
    .form-box {
        .approve-submit-btn {
            margin-left: 240px;
            .el-button:nth-child(1){
                margin-right: 15px;
            }
        }
    }
    .el-input__inner {
        color: $__color-show;
    }
    .el-textarea__inner {
        color: $__color-show;
    }
    .approve-int-box {
        padding-left: 110px;
    }
    .img-box {
        width: 260px;
        height: 168px;
        border: 1px dashed #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
        /*img {*/
            /*max-width: 238px;*/
            /*max-height: 154px;*/
        /*}*/
    }
    .upload-btn {
        display: flex;
        justify-content: center;
    }
    .approve-success {
        background-image: url("https://hpx-pc.oss-cn-beijing.aliyuncs.com/registerImgTem/approve-bg.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 400px;
        height: 300px;
        text-align: center;
        margin-bottom: 15px;
    }
    .success-title {
        height: 60px;
        line-height: 75px;
        font-size: $__big-font-size;
        color: $__color-label;
    }
    .success-con {
        margin-top: 26px;
        div{
            margin-top: 12px;
            color: $__color-show;
        }
    }
    .check_error_box {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
    .check_error_con {
        width: 1200px;
        height: 32px;
        line-height: 32px;
        background: $__color-bg-unimportance;
        font-size: $__little-font-size;
        color: $__color-remind;
        .icon-jingshi {
            font-size: $__little-font-size;
        }
    }
    .register-form {
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .approve-int {
        .el-input__inner {
            width: $width-int-register;
            height: $height-int-register;
            line-height: $height-int-register;
        }
    }
    .el-input__inner {
        font-size: $__little-font-size;
    }
    .item-code {
        margin-bottom: 0;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: $__color-show;
    }
    .register-phone-box {
        .el-form-item.is-required .el-form-item__label:before {
            content: '';
            color: #fff;
        }
    }

    .phone-title-left {
        font-size: $__title-font-size;
        color: $__color-bg-footer;
    }
    .phone-title-right {
        float: right;
        font-size: $__little-font-size;
    }
    .btn-text-color {
        color: $__color-show;
    }
    .login-font-color {
        color: $__color-link;
        cursor: pointer;
    }
    .change-default {
        display: flex;
        flex-direction: column;
        margin-left: 110px;
        & .el-checkbox {
            color: $__color-show;
        }
        & .el-checkbox__inner {
            width: $__font-size-default;
            height: $__font-size-default;
        }
        & .el-checkbox__input.is-checked + .el-checkbox__label {
            color: $__color-show;
        }
        .el-checkbox__inner::after {
            left: 6px;
            top: 3px;
        }
    }
    .register-form {
        font-size: $__font-size-default;
    }
    .edit-form-box {
        margin-bottom: 30px;
    }

    .form-box {
        display: flex;
        justify-content: center;
    }
    .form-conent-box {
        width: 720px;
        .customer-form-title {
            margin-bottom: 13px;
        }
    }
    .customer-title-i {
        font-size: $__little-font-size;
        color: $__color-remind;
    }
    .id-card-img {
        display: flex;
        justify-content: space-between;
    }
    .enterprise-sumlit-btn {
        width: $width-int-register;
        margin-left: 190px;
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
    }
    .el-form-item__label {
        color: $__color-label;
    }
    .form-int-edit {
        .el-form-item {
            height: $height-int-register;
        }
        .el-form-item__label {
            line-height: $height-int-register;
        }
        .el-form-item__content {
            line-height: $height-int-register;
        }
        .el-form-item__error {
            padding-top: 0;
            color: $__color-remind;
            font-size: $__little-font-size;
        }
    }
    .form-box {
        @extend .form-int-edit;
    }
    .register-phone-box {
        @extend .form-int-edit;
    }
    // 速贴样式
    .discount-enter-title-box {
        display: flex;
        justify-content: center;
        width: 100%;
        .discount-enter-title {
            width: 82%;
            display: flex;
            justify-content: space-between;
        }
    }
    .discount-enter-int-box {
        display: flex;
        justify-content: center;
        .el-form-item {
            display: flex;
        }
        .discount-customer-guid {
            display: flex;
            justify-content: center;
        }
        .edit-discount-customer {
            width: 82%;
        }
    }
</style>